// 商业险配置方案
<template>

<div class="car-sy-plan">
    <div class="container" ref='container'>
        <div class="content">
            <Table id='sy-table' :data='data' :columns='title'></Table>
        </div>
    </div>
</div>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import parckComponent from '@/components/ivew_components/parck_components/index'
import tableFormBuilder from '@/components/ivew_components/table_form_builder/index.vue'



@Component({})
export default class carSyPlan extends Vue{
    name:string = 'car-sy-plan'
    
    @Prop()
    data:formInf.syData[]

    @Prop()
    disabled:boolean

    // 表单组件配置
    mods = {

        diSanZhe:{
        
            component: parckComponent('select'),
            conf: {
                size: 'small',
                options:[
                    {
                        label: '5万',
                        value: 50000,
                    },
                    {
                        label: '10万',
                        value: 100000,
                    },
                    {
                        label: '15万',
                        value: 150000
                    },
                    {
                        label: '20万',
                        value: 200000,
                    },
                    {
                        label: '30万',
                        value: 300000,
                    },
                    {
                        label: '50万',
                        value: 500000
                    },
                    {
                        label: '100万',
                        value: 1000000
                    },
                    {
                        label: '150万',
                        value: 1500000
                    },
                    {
                        label: '200万',
                        value: 2000000
                    },
                    {
                        label: '300万',
                        value: 3000000
                    }
                ]
            },
            
        },
        siJi:{
        
            component: parckComponent('select'),
            conf: {
                size: 'small',
                options:[
                    {
                        label: '1万',
                        value: 10000,
                    },
                    {
                        label: '2万',
                        value: 20000,
                    },
                    {
                        label: '5万',
                        value: 50000
                    }
                    
                ]
            },
            
        },
        chengKe:{
        
            component: parckComponent('select'),
            conf: {
                size: 'small',
                options:[
                    {
                        label: '1万',
                        value: 10000,
                    },
                    {
                        label: '2万',
                        value: 20000,
                    },
                    {
                        label: '5万',
                        value: 50000
                    }
                    
                ]
            },
            
        },
        huaHen:{
        
            component: parckComponent('select'),
            conf: {
                size: 'small',
                options:[
                    {
                        label: '2千',
                        value: 2000,
                    },
                    {
                        label: '5千',
                        value: 5000,
                    },
                    {
                        label: '1万',
                        value: 10000,
                    },
                    {
                        label: '2万',
                        value: 20000
                    }
                    
                ]
            },
            
        },
        boLi:{
             component: parckComponent('radioGroup'),
             conf:{
                 radios:{
                     gc: '国产',
                     jk: '进口'
                 }
             }
        }
        
    };
    

    title = [

        {
            title: '#',
            width: 60,
            key: 'checked',
            align: 'center',
            render: (h, {row, column, index}) =>{
                let vue = this;
            
                return h('checkbox',{
                    props: {
                        size: 'small',
                        value: row[column.key],
                        disabled: vue.disabled
                    },
                    on:{
                        input (val){
                            row[column.key] = val;

                            // 与不计免赔联动
                            row['jp'] = val;

                            vue.data[index] = row;
                        }
                    }
                })
                
            }
        },
        
        {
            title: '险种',
            key: 'name',
            width: 120,
        },
        
        {
            title: '投保额',
            key: 'value',
            align: 'center',
            render: (h, {row, column, index}) =>{
                let vue = this;
                
                if(vue.disabled){

                   Object.keys(vue.mods).forEach(key =>{
                        vue.mods[key]['conf']['disabled'] = true
                    })
                    
                }

                return h(tableFormBuilder, {props:{
                    data:vue.data,
                    index,
                    row,
                    column,
                    mods: vue.mods,
                    disabled: vue.disabled
                    
                }});

            }
        },
        {
            title: '不计免赔',
            key: 'jp',
            width: 120,
            align: 'center',
            render: (h, {row, column, index}) =>{

                let vue = this;

                // 过滤无不计免赔项
                let map = new Set(['boLi', 'fixerAssigned', 'trdLosting']);
                let component = !map.has(row.key) ? [ h('checkbox',{
                    props: {
                        size: 'small',
                        value: row[column.key],
                        disabled: vue.disabled
                    },
                    on:{
                        input (val){
                            vue.data[index][column.key] = val;
                        }
                    }
                }) ] : []
            
                return h('span', null, component)
                
                 
                
            }
        }
        
    ]

}


</script>

<style lang='scss'>

.car-sy-plan{
    margin-left: _rem(-11px);
    
    height: 100%;
    background: $block_bg_color;
    
    .container{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        margin: auto;
    }
    
    .content{
        margin-left: _rem(5px);
        width: 100%;
        min-height: 100%;
        padding: _intervals();
        background: $block_bg_color;
        // box-shadow: $default_shadow;
    }

    .ivu-table-wrapper{
        border: none;
    }

    div.ivu-table::after{
        content: '';
        display: none;
    }
   
}




</style>